<template>
  <div>
    <h2>门店添加</h2>
    <hr>
    <table border="1">
      <tr>
        <td align="right">门店名称:</td>
        <td>
          <input type="text" v-model="state.mName" />
        </td>
      </tr>
      <tr>
        <td align="right">门店电话:</td>
        <td>
          <input type="text" v-model="state.mPhone" />
        </td>
      </tr>
      <tr>
        <td align="right">门店地址:</td>
        <td>
          <input type="text" v-model="state.mAddress" />
        </td>
      </tr>
      <tr>
        <td align="right">门店Logo:</td>
        <td>
          <input type="file" @change="TP" />
          <img :src="src" alt="" width="60" height="60" v-if="src != ''" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" value="门店添加" @click="MenDianAdd" />
        </td>
        <td>
          <input type="button" value="门店列表" @click="MenDianShow" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const route = useRoute();

let data: any = reactive({
  state: {
    mName: '',
    mPhone: '',
    mAddress: '',
    mPhoto: '',
  },
  src: '',
});

let { state, src } = toRefs(data);

//图片上传
function TP(e:any)
{
  var FD=new FormData();
  var file=e.target.files[0];
  FD.append('file',file);
  axios({
    url:'https://localhost:7127/api/MenDian/TP',
    method:'post',
    data:FD
  })
  .then(res=>{
    if(res.data.data=='图片不能大于2M')
  {
    alert("图片不能大于2M")
    return 
  }
   else if(res.data.data=='图片格式不正确')
  {
    alert("图片格式不正确")
    return 
  }
  else{
    alert('图片上传成功')
    src.value=res.data.data
  }
  })
  .catch(err=>{
    console.log(err)
  })
}



//门店添加
function MenDianAdd() {
  let obj = {
    mName:state.value.mName,
    mPhone: state.value.mPhone,
    mAddress:state.value.mAddress,
    mPhoto:src.value,
    mzt:'1',
    mIsDeleted:'0',
  };
  if(obj.mName=="")
  {
    alert('门店名称不能为空')
    return
  }
  if(obj.mPhone=="")
  {
    alert('门店电话不能为空')
    return
  }
  if(obj.mAddress=="")
  {
    alert('门店地址不能为空')
    return
  }
  axios({
    url:'https://localhost:7127/api/MenDian/MenDianAdd',
    method:'post',
    data:obj
  })
  .then(res=>{
    if(res.data.data==-1)
  {
    alert('门店名称重复请重新输入')
    return
  }
    if(res.data.data>0)
  {
    alert('添加成功');
    router.push('/MenDianShow')
  }
  else{
    alert('添加失败')
    return
  }
  })
  .catch(err=>{
    console.log(err)
  })
}

function MenDianShow()
{
  router.push('/MenDianShow')
}

</script>

<style scoped></style>
